<template>
    <div>
        <ul class="nav" ref="nav">
            <li
                v-for="(item,index) in floor_list"
                :class="{con:num==index}"
                :key="item.type"
                @click="checkout(index)"
            >{{item.type}}</li>
        </ul>
        <div ref="floor_view">
            <div class="floor" v-for="item in floor_list" :key="item.type">
                <h2 class="floor_title">{{item.type}}</h2>
                <list :list="item.list"></list>
            </div>
        </div>
    </div>
</template>
<script>
import $ajax from "../plugins/ajax";
import scrollTo from "../plugins/scrollTo";
export default {
    beforeRouteEnter: async function(to, from, next) {
        var res = await $ajax("/goodList?type_one=" + to.params.type);
        next(vm => {
            vm.list = res.data;
        });
        
    },
    beforeRouteUpdate: async function(to, from, next) {
        var res = await $ajax("/goodList?type_one=" + to.params.type);
        this.list = res.data;
        next();
    },
    data() {
        return {
            list: [],
            num: "",
            x:"",
            flag:true
        };
    },
    computed: {
        floor_list() {
            var floor_list = []; //[{type:"",list:[{},{}]}]
            for (var i = 0; i < this.list.length; i++) {
                var flag = true;
                for (var j = 0; j < floor_list.length; j++) {
                    if (this.list[i].type_two == floor_list[j].type) {
                        floor_list[j].list.push(this.list[i]);
                        flag = false;
                        break;
                    }
                }
                if (flag) {
                    floor_list.push({
                        type: this.list[i].type_two,
                        list: [this.list[i]]
                    });
                }
            }
            return floor_list;
        }
    },
    mounted(){
        this.scroll();
        window.addEventListener("scroll",()=>{
            this.flag?this.scroll():null;
        });
    },
    methods: {
        checkout(index) {
            this.num = index;
            var title = this.$refs.floor_view.getElementsByClassName(
                "floor_title"
            )[index];
            this.flag=false;
            scrollTo(title.offsetTop - 80,()=>{
                this.flag=true;
            });
        },
        scroll() {
            var H =
                window.innerHeight ||
                document.body.clientHeight ||
                document.documentElement.clientHeight;
            var content=this.$refs.floor_view
            // var nav=this.$refs.nav
            // 获取页面滚动高度
            var st =
                document.body.scrollTop || document.documentElement.scrollTop;

            for (var i = 0; i < content.children.length; i++) {
                // 获取元素顶部偏移量 offsetTop
                var ot = content.children[i].offsetTop;
                var h = parseFloat(
                    getComputedStyle(content.children[i], null).height
                );

                if (st >= ot - H / 2 && st + H / 2 < ot + h && i != this.x) {
                    this.x = i;
                    this.num=this.x;
                    break;
                }
            }
        }
    },
};
</script>
<style scoped>
h2 {
    text-align: center;
}
.nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;
    width: 100px;
    background: white;
    padding: 10px;
    border:1px solid rgb(119, 63, 119);
    border-radius: 5px
}
.nav li {
    line-height: 30px;
    text-align: center;
    cursor: pointer;
}
.nav .con {
    color: purple;
    font-weight: bolder;
    filter: drop-shadow(0 0 10px purple)
}
.nav li:hover{
    color: purple;
    font-weight: bolder;
    filter: drop-shadow(0 0 10px purple)
}
</style>